Day 9 CSS Selector part2

2022 iThome 鐵人賽

DAY 9

自我挑戰組

一趟30天網頁設計的學習冒險＃explain like i‘m five 系列第 9 篇

14th鐵人賽 html

candy82202

2022-09-24 01:23:01

1065 瀏覽

分享至

前言

前面幾個選擇器是比較基礎簡單可以理解的，到這裡就開始需要思考一下…

今天還有好多選擇器的規範，就不多說直接開始。

Part.2 介紹的基本選擇器如下

Attribute selectors 屬性選擇器
CSS 屬性選擇器

Attribute selectors 屬性選擇器

在前幾天的HTML有提到< input >，如果稍稍有點記不得可以上來前幾天查詢"Day5 Input"

在表格< input >裡面，如果想讓網頁表格輸入進去的字體更改顏色，是可以像前面一樣，使用< class >來命名更改，但這樣表示每一個< input >標籤都需要再額外新增< class >命名，這樣太複雜，當然會希望用最快的速度可以一次統一更改。

先在HTML裡開一個表單，輸入名字跟電話：

<body>
    <h1>通訊錄</h1>
    <form action="" method="">
  <label for="name">姓名:</label>
      <input
        minlength="2"
        maxlength="50"
        id="name"
        type="text"
        name="InputName"
        placeholder="請輸入真實姓名"
        required
      />
      <br />
      <label for="tel">電話：</label>
      <input type="text" id="tel" name="InputTel" required>
      <br/>
      <label for="email">email:</label>
      <input type="email" id="email" required>
  </body>

在CSS檔案裡，針對< input type=”text” >的標籤做設定。

舉例：希望打在表格< type=“text” >裡面的字，可以呈現royalblue的顏色。

input[type="text"] {
  color: royalblue;
}

下圖可以看到因為email那行的< type=”email” >，所以輸入的內容文字不會更改顏色，其他姓名跟電話輸入的內容都有更改成功。

CSS屬性選擇器

元素[屬性]{宣告;}
元素[屬性="值"]{宣告;}
元素[屬性～="文字"]{宣告;}
元素[屬性|="文字"]{宣告;}
元素[屬性^="文字"]{宣告;}
元素[屬性$="文字"]{宣告;}
元素[屬性*="文字"]{宣告}

元素[ 屬性 ]{ 宣告; }：對有設定指定屬性的元素進行CSS樣式設定。

像是可以選擇具有< class >屬性的< p >段落，或具有< alt >屬性的< img >元素

<head>
<title>鐵人網頁挑戰</title>
    <style>
      p[class] {
        font-size: 21px;
        color: blue;
      }
      img[alt] {
        border: 2px solid gold;
      }
    </style>
  </head>
  <body>
    <p>這個週末想去咖啡廳</p>
    <p class="food">下圖這是咖啡</p>
    <img src="coffee.jpg" alt="this is mountain" width="200px" />
    <p class="food">還想配個小蛋糕一起享用</p>
  </body>

在下圖的網頁上可以看到設定是< p >段落的< class=”food” >就會字體大小更改成21像素，顏色也更改為藍色，< img >元素裡面有設定< alt >那就會新增「2像素、實體、金色的邊框。」

元素[ 屬性="值" ]{ 宣告; }：跟上面的差異是對指定的項目分類更細有設定指定屬性以及值的元素進行CSS樣式設定。

<head>
<style>
      p[class="food"] {
        font-size: 21px;
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>這個週末想去咖啡廳</p>
    <p class="food">下圖這是咖啡</p>
    <img src="coffee.jpg" alt="this is coffee" width="200px" />
    <p class="food">還想配個小蛋糕一起享用</p>
    <p class="pets">咖啡廳裡還有小貓</p>
    <p class="pets">還有小狗</p>
  </body>

下圖網頁上也可以看得出來，指定< class=”food” >的才會更改字體大小跟顏色，另外兩行指定其他的就不會更改。

元素[ 屬性～="文字" ]{ 宣告; }：如果想要在進一步嚴格規定，所選擇的文字必須完全符合才是我們的目標對象。

上面三樣的差異，假設情況是在餐桌上

第一個就像是指定桌上的香蕉，所以包含桌上所有的香蕉。
第二個就像是指定桌上盤子上的香蕉，所以桌上沒有在盤子上的香蕉就不包含，有在盤子上的才算。
第三個就像是指定桌上盤子上的小香蕉，所以除了需要在盤子裡，還要是小香蕉，大香蕉不算。

指定的分類會因為上面的嚴格規定，分類的更加詳細。

元素[ 屬性^="特定文字開頭文字" ]{ 宣告; }：就像是設定只要超連結這些「 https : //」開頭的網頁都更改設定：

<head>
<style>
      a[href^="https://"]
      {
        color: brown;
        border: 2px solid gold;
      }
    </style>
  </head>
  <body>
    <img src="coffee.jpg" alt="this is a coffee" width="250px" />
    <br />
    <a href="https://google.com">google</a>
  </body>

網頁上可以看到我想要包含「 https:// 」的內容都統一更改，所以下面< a >裡面的超連結就會更改。

元素[ 屬性|="文字" ]{ 宣告; }：這個則是選出具有特定文字開頭加上「-」，就像是我們可能會設定link-1，或是link-2等等的。
元素[ 屬性$="特定文字結尾" ]{ 宣告; }：像是我們如果想要指定圖片裡面只要是使用.png檔案的圖片，統一圖片大小呈現的樣子，就可以使用這個。
元素[ 屬性*="包含特定文字"]{宣告}：只要包含特定文字都會是我們選擇的目標對象

用下圖幾句話設定不同的class來進行舉例：

<body>
    <p class="redText">今天天氣很好</p>

    <p class="orangeText">天氣溫度25度</p>

    <p class="yellowText">我跟同學要出去玩</p>

    <p class="Textred">想要午餐吃義大利麵</p>

    <p class="Text-1">下午茶吃蛋糕配咖啡</p>

    <p class="Text-2">晚餐吃韓式炸雞</p>
  </body>

/* 元素[ 屬性|="文字" ]{ 宣告; } */
p[class|="Text"] {
  color: brown;
}
/* 元素[ 屬性$="特定文字結尾" ]{ 宣告; } */
p[class$="Text"] {
  color: yellow;
}
/* 元素[ 屬性*="包含特定文字"]{宣告} */
p[class*="red"] {
  color: red;
}

可以看到下圖